<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>我的收藏</title>
		<script src="/js/axios.js"></script>
		<script src="/js/vue.js"></script>
		<script src="/js/element-ui/index.js"></script>
		<link rel="stylesheet" type="text/css" href="/js/element-ui/index.css" />
	</head>
	<body>
		<div id="box">
			<el-container>
				<el-header>
					<div th:include="~{common/nav-head::head}"></div>
				</el-header>
				<el-container>
					<el-main style="margin-top: 5vw;">
						<el-table :data="myFavourites">
							<el-table-column label="标题" prop="title"></el-table-column>
							<el-table-column label="用户名" prop="nickname"></el-table-column>
							<el-table-column label="阅读量" prop="pageviews"></el-table-column>
							<el-table-column label="点赞量" prop="likes"></el-table-column>
							<el-table-column label="收藏量" prop="favouriteSum"></el-table-column>
							<el-table-column label="发表时间" prop="createTime"></el-table-column>
							<el-table-column label="操作" min-width="100px">
								<template slot-scope="scope">
									&nbsp;&nbsp;
									<el-button style="background-color: red;color: white;" @click="delFavourite(scope.row.favouriteId,scope.row.id)">取消收藏</el-button>
									<el-button v-if="scope.row.likeId==null" style="background-color: green;color: white;" @click="like(scope.row.id)">点赞</el-button>
									<el-button v-else style="background-color: red;color: white;" @click="delLike(scope.row.likeId,scope.row.id)">取消点赞</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-main>
				</el-container>
			</el-container>
		</div>
	</body>
	<script>
		new Vue({
			el: "#box",
			data: {
				myFavourites:[]
			},
			methods: {
				delFavourite(favouriteId,blogId){
					let _this = this
					axios.post("/api/cons/blog/delFavourite",{id:favouriteId,blogId:blogId})
					.then(function(response){
						if(response.data.code == 200){
							_this.$message({
								message: response.data.msg,
								showClose: 'true',
								type: 'success'
							})
							axios.get("/api/cons/blog/findMyFavourites")
							.then(function(response){
								_this.myFavourites = response.data.data
							})
						}
					})
				},
				like(id){
					let _this = this
					axios.post("/api/cons/blog/like/"+id)
					.then(function(response){
						if(response.data.code == 200){
							_this.$message({
								message: response.data.msg,
								showClose: 'true',
								type: 'success'
							})
							axios.get("/api/cons/blog/findMyFavourites")
							.then(function(response){
								_this.myFavourites = response.data.data
							})
						}
					})
				},
				delLike(likeId,blogId){
					let _this = this
					axios.post("/api/cons/blog/delLike",{id:likeId,blogId:blogId})
					.then(function(response){
						if(response.data.code == 200){
							_this.$message({
								message: response.data.msg,
								showClose: 'true',
								type: 'success'
							})
							axios.get("/api/cons/blog/findMyFavourites")
							.then(function(response){
								_this.myFavourites = response.data.data
							})
						}
					})
				}
			},
			mounted() {
				let _this = this
				axios.get("/api/cons/blog/findMyFavourites")
				.then(function(response){
					_this.myFavourites = response.data.data
				})
			}
		})
	</script>
	<style>
		.el-main {
			background-color: #E9EEF3;
			color: #333;
			text-align: center;
			line-height: 160px;
		}
	</style>
</html>
